<template>
  <div class="attendance-record-container">
    <van-nav-bar title="公告" fixed placeholder left-arrow @click="handleBack" />
    <van-cell-group inset>
      <div style="height: 32px; background-color: #f8f8f8;"></div>
      <!-- 公告记录列表 -->
      <van-cell
        v-for="(item, index) in noticeHistory"
        :key="index"
        :title="`${item.title}`"
        :value="item.reason"
      >
        <span class="create-time">{{ item.createTime }}</span>
        <div class="notice-content" v-html="item.content"></div>
      </van-cell>
    </van-cell-group>
    <!-- 分页组件 -->
    <van-pagination
      v-if="totalPages > 1"
      :total="totalRecords"
      :page="currentPage"
      :page-size="pageSize"
      @change="handlePageChange"
    />
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { getNoticeListService} from '@/api/notice' // 假设的接口函数，需根据实际情况实现
import { showToast } from 'vant'
import moment from'moment'
import {useRouter} from 'vue-router'
const router = useRouter()

// 当前页码
const currentPage = ref(1)
// 每页显示记录数
const pageSize = ref(10)
// 总记录数
const totalRecords = ref(0)
// 总页数
const totalPages = ref(1)
// 公告记录列表
const noticeHistory = ref([])

// 获取公告记录数据
const fetchAttendanceRecords = async () => {
   const res = await getNoticeListService(currentPage.value, pageSize.value)
   console.log(res);
   if (res.code === 0 && Array.isArray(res.data)) {
            noticeHistory.value = res.data;
            // 假设后端没有直接返回 total 字段，这里简单将当前页数据量作为总记录数
            // 若后端能返回总记录数，需要调整此处逻辑
            totalRecords.value = res.data.length; 
            totalPages.value = Math.ceil(totalRecords.value / pageSize.value);
          }
}

// 处理页面切换
const handlePageChange = (page) => {
  currentPage.value = page
  fetchAttendanceRecords()
}

// 处理返回按钮点击
const handleBack = () => {
  router.push('/workbenches')
  console.log('返回上一页')
}

onMounted(() => {
  fetchAttendanceRecords()
})
</script>

<style scoped>
.attendance-record-container {
  background: #f8f8f8;
  min-height: 100vh;
  font-family: Arial, sans-serif;
}

/* 优化单元格布局 */
.van-cell {
  padding: 16px;
  margin-bottom: 15px;
  border-radius: 10px;
  background-color: white;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transition: all 0.3s ease;
  
  /* 使用flex布局确保内容居中 */
  display: flex;
  flex-direction: column;
  align-items: center;
}

.van-cell:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}

/* 标题样式 */
.van-cell__title {
  color: #2c3e50;
  font-weight: 700;
  font-size: 20px;
  margin-bottom: 10px;
  text-align: center; /* 标题也居中 */
  width: 100%;
}

/* 时间样式 */
.create-time {
  color: #95a5a6;
  font-size: 14px;
  margin-bottom: 12px;
  width: 100%;
  text-align: right;
}

/* 公告内容样式 - 增强优先级 */
.notice-content {
  font-family: '黑体', SimHei, sans-serif !important;
  font-size: 18px !important;
  color: #333 !important;
  text-align: center !important;
  line-height: 1.8 !important;
  margin: 15px 0 !important;
  padding: 15px !important;
  background-color: #f9f9f9 !important;
  border-radius: 8px !important;
  white-space: pre-wrap !important;
  word-break: break-word !important;
  
  /* 确保内容块居中且有最大宽度限制 */
  width: 90%;
  max-width: 800px;
}

/* 状态标签样式 */
.status-normal { color: #07c160; }
.status-late { color: #ee0a24; }
.status-early { color: #ff976a; }
</style>